<template>
<div class='rightTable'>
  <div class="search flex flex-wrap">
      <p class="w-[180px] mr-[10px] mb-[10px]">
        <el-input
          v-model="searchParams.blurry"
          placeholder="输入名称或者邮箱搜索"
          size="mini"
        ></el-input>
      </p>
      <p class="w-[250px] mr-[10px] mb-[10px]">
        <el-date-picker
          v-model="searchParams.value2"
          type="daterange"
          align="center"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="mini"
        >
        </el-date-picker>
      </p>
      <p class="w-[100px] mr-[10px] mb-[10px]">
        <el-select
          v-model="searchParams.enabled"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p class="mr-[10px] mb-[10px]">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          class="mb-[10px]"
          >搜索</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-search"
          size="mini"
          class="mb-[10px]"
          >重置</el-button
        >
      </p>
    </div>

    <div class="handler">
      <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
      <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini"
        >删除</el-button
      >
      <el-button type="warning" icon="el-icon-download" size="mini"
        >导出</el-button
      >
    </div>
    <bd-table :tableTitle="tableTitle" :tableData="tableData"></bd-table>
</div>
</template>

<script>

export default {
  name: 'rightTable',
  props: [],
  components: { }, // 定义子组件
  data () {
    return {
      // 搜索参数
      searchParams: {
        blurry: '', // 模糊搜索
        value2: '',
        enabled: '' // 启用停用
      },
      tableData: [
        { id: 1, username: 'zs', sex: 1 }
      ],
      tableTitle: [
        {
          label: '用户名',
          prop: 'username',
          width: '180px',
          type: 'text'
        },
        {
          label: '昵称',
          prop: 'nickname'
        },
        {
          label: '性别',
          prop: 'sex',
          type: 'text',
          filter: (row) => {
            return row.sex === 1 ? '男' : '女'
          }
        },
        {
          label: '电话',
          prop: 'phone'
        },
        {
          label: '邮箱',
          prop: 'email'
        },
        {
          label: '部门',
          prop: 'dept'
        },
        {
          label: '状态',
          prop: 'status'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '操作',
          type: 'btn',
          width: '180',
          btn: [
            {
              icon: 'el-icon-edit',
              handlerClick: this.editClick
            },
            {
              icon: 'el-icon-delete',
              type: 'danger',
              handlerClick: this.editClick
            }
          ]
        }
      ],
      // 日期
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 激活 禁用
      options: [
        {
          label: '激活',
          value: true
        },
        {
          label: '禁用',
          value: false
        }
      ]
    }
  },
  computed: {}, // 计算
  watch: {}, // 监视
  methods: {
    editClick (row) {
      console.log(row)
    }
  },
  mounted () {

  }
}
</script>
<style lang='scss' scoped>

</style>
